<template>
  <!--  数据推送规则-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.queryString" clearable placeholder="设备编号/传感器SN/采集仪SN">
        <template slot="prepend">筛选条件</template>
      </el-input>
      <el-select v-model="form.onlineStatus" style="width: 150px;" clearable placeholder="设备状态">
        <el-option
          v-for="item in EnumEquipStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button class="common_btn-defalut" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <!-- table -->
      <el-table :data="tableList" border    @expand-change="queryFormInfoList">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 分段表单 -->
            <div class="tableChild">
              <el-table :data="scope.row.children || []" border
                        v-loading="loading">
                <el-table-column prop="monitorTypeName" show-overflow-tooltip min-width="150"
                                 label="监测类型"></el-table-column>
                <el-table-column prop="url" show-overflow-tooltip min-width="150"
                                 label="推送地址"></el-table-column>

                <el-table-column label="操作" fixed="right" width="150">
                  <template slot-scope="scope">
                    <button type="text"
                            class="btn_edit"
                            @click="handleEdit(scope.row)">
                      编辑
                    </button>

                    <el-popconfirm confirmButtonText='好的'
                                   cancelButtonText='不用了' icon="" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                      <button slot="reference" class="btn_delete">删除</button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>

          </template>
        </el-table-column>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="公司名称" min-width="105">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="130">
          <template slot-scope="scope">
            <el-button type="text" class="btn_jump"
                       @click="handleEdit(scope.row,'parent')">
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
    </div>
    <x-loading v-show="isLoading"></x-loading>
    <!-- 规则表单新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialogRule" :close-on-click-modal="false" min-width="520px">
      <!-- 具体表单 -->
      <div style="max-height: 60vh;overflow: auto;width: 100%">
        <el-form>
          <el-form-item label="推送地址">
            <el-input v-model="currentRow.url" placeholder="请输入推送地址"></el-input>
          </el-form-item>
          <el-form-item label="监测类型">
            <el-select v-model.trim="currentRow.monitorType" clearable placeholder="选择监测类型">
              <el-option v-for="item in EnumProjectMonitorTypeList" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <el-button icon="el-icon-plus" class="common_btn-defalut" style="margin-bottom: 10px" @click="addCurrenRow()">
          新增
        </el-button>
        <el-table
          :data="currentRow.ruleList"
          @expand-change="queryRoadSectionList"
          style="width: 100%">
          <!-- 展开数据-->

          <el-table-column type="expand" label="展开第二级" width="120">
            <template slot-scope="props">
              <el-table v-if="props.row.childList" @expand-change="queryRoadSectionList"
                        :data="props.row.childList || []"
                        border
                        v-loading="loading">

                <el-table-column type="expand" label="展开第三级" width="120">
                  <template slot-scope="props1">
                    <el-table v-if="props1.row.childList" @expand-change="queryRoadSectionList"
                              :data="props1.row.childList || []"
                              border
                              v-loading="loading">
                      <!--                       第三级内容-->
                      <el-table-column
                        label="序号"
                        width="80">
                        <template slot-scope="scope2">
                          {{getIndex(props.$index)}}-{{getIndex(props1.$index)}}-{{getIndex(scope2.$index)}}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="推送名称"
                        prop="pushName">
                        <template slot-scope="scope2">
                          <el-input v-model="scope2.row.pushName"
                                    placeholder="请输入推送名称"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="object类型"
                        prop="type">
                        <template slot-scope="scope2">
                          <!--                    如果上一级选择了类型为map，本栏只能为value类型-->
                          <el-select :disabled="props1.row.objectType==2" v-model="scope2.row.objectType" filterable
                                     clearable
                                     placeholder="请选择object类型"
                                     @change="changeType(scope.row) "
                                     @focus="$forceUpdate()">
                            <el-option
                              v-for="option in EnumTypeOnlyList"
                              :key="option.code"
                              :label="option.name"
                              :value="option.code">
                            </el-option>
                          </el-select>

                        </template>
                      </el-table-column>
                      <el-table-column
                        label="参数"
                        prop="valueList">
                        <template slot-scope="scope2">
                          <el-input v-if="scope2.row.objectType==1||scope2.row.objectType==null"
                                    v-model="scope2.row.javaName"
                                    placeholder="请输入名称"></el-input>
                          <el-button v-else class="common_btn-defalut" icon="el-icon-plus" style="margin-bottom: 10px"
                                     @click="addCurrenRow(scope2.row)">
                            新增
                          </el-button>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="转型"
                        prop="type">
                        <template slot-scope="scope2">
                          <el-select :disabled="scope2.row.objectType!==1" v-model="scope2.row.javaType" filterable
                                     clearable placeholder="请选择转型"
                                     @change="changeType(scope2.row) "
                                     @focus="$forceUpdate()">
                            <el-option
                              v-for="option in EnumJavaTypeList"
                              :key="option.code"
                              :label="option.name"
                              :value="option.code">
                            </el-option>
                          </el-select>

                        </template>
                      </el-table-column>

                    </el-table>

                  </template>
                </el-table-column>
                <!-- 第二级内容-->
                <el-table-column
                  label="序号"
                  width="80">
                  <template slot-scope="scope1">
                    {{getIndex(props.$index)}}-{{getIndex(scope1.$index)}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="推送名称"
                  prop="pushName">
                  <template slot-scope="scope1">
                    <el-input v-model="scope1.row.pushName"
                              placeholder="请输入推送名称"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="object类型"
                  prop="type">
                  <template slot-scope="scope1">
                    <!--                    如果上一级选择了类型为map，本栏只能为value类型-->
                    <el-select :disabled="props.row.objectType==2" v-model="scope1.row.objectType" filterable clearable
                               placeholder="请选择object类型"
                               @change="changeType(scope.row) "
                               @focus="$forceUpdate()">
                      <el-option
                        v-for="option in EnumTypeList"
                        :key="option.code"
                        :label="option.name"
                        :value="option.code">
                      </el-option>
                    </el-select>

                  </template>
                </el-table-column>
                <el-table-column
                  label="参数"
                  prop="valueList">
                  <template slot-scope="scope1">
                    <el-input v-if="scope1.row.objectType==1||scope1.row.objectType==null" v-model="scope1.row.javaName"
                              placeholder="请输入名称"></el-input>
                    <el-button v-else class="common_btn-defalut" icon="el-icon-plus" style="margin-bottom: 10px"
                               @click="addCurrenRow(scope1.row)">
                      新增
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  label="转型"
                  prop="type">
                  <template slot-scope="scope1">
                    <el-select :disabled="scope1.row.objectType!==1" v-model="scope1.row.javaType" filterable clearable
                               placeholder="请选择转型"
                               @change="changeType(scope1.row) "
                               @focus="$forceUpdate()">
                      <el-option
                        v-for="option in EnumJavaTypeList"
                        :key="option.code"
                        :label="option.name"
                        :value="option.code">
                      </el-option>
                    </el-select>

                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  prop="type">
                  <template slot-scope="scope1">
                    <el-popconfirm confirmButtonText='好的'
                                   cancelButtonText='不用了' icon="" title="确定删除吗？" @confirm="handleDeleteCurrenRow(scope1.row,scope1.$index,props.$index)">
                      <button slot="reference" class="btn_delete">删除</button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

            </template>
          </el-table-column>
          <!-- 第1级内容-->
          <el-table-column
            label="序号"
            width="80">
            <template slot-scope="scope">
              {{getIndex(scope.$index)}}
            </template>
          </el-table-column>
          <el-table-column
            label="推送名称"
            prop="pushName">
            <template slot-scope="scope">
              <el-input v-model="scope.row.pushName"
                        placeholder="请输入推送名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="object类型"
            prop="objectType">
            <template slot-scope="scope">
              <el-select v-model="scope.row.objectType" filterable clearable placeholder="请选择object类型"
                         @change="changeType(scope.row) "
                         @focus="$forceUpdate()">
                <el-option
                  v-for="option in EnumTypeList"
                  :key="option.code"
                  :label="option.name"
                  :value="option.code">
                </el-option>
              </el-select>

            </template>
          </el-table-column>
          <el-table-column
            label="参数"
            prop="objectType">
            <template slot-scope="scope">
              <el-input v-if="scope.row.objectType==1||scope.row.objectType==null" v-model="scope.row.javaName"
                        placeholder="请输入名称"></el-input>
              <el-button v-else class="common_btn-defalut" icon="el-icon-plus" style="margin-bottom: 10px"
                         @click="addCurrenRow(scope.row)">
                新增
              </el-button>
            </template>
          </el-table-column>
          <el-table-column

            label="转型"
            prop="type">
            <template slot-scope="scope">
              <el-select :disabled="scope.row.objectType!==1" v-model="scope.row.javaType" filterable clearable
                         placeholder="请选择转型"
                         @change="changeType(scope.row) "
                         @focus="$forceUpdate()">
                <el-option
                  v-for="option in EnumJavaTypeList"
                  :key="option.code"
                  :label="option.name"
                  :value="option.code">
                </el-option>
              </el-select>

            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="type">
            <template slot-scope="scope">
              <el-popconfirm confirmButtonText='好的'
                             cancelButtonText='不用了' icon="" title="确定删除吗？" @confirm="handleDeleteCurrenRow(scope.row,scope.$index)">
                <button slot="reference" class="btn_delete">删除</button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialogRule = false">取消</el-button>
                <el-button class="common_btn-defalut" type="primary" @click="addFormRule">确定</el-button>
      </span>
    </el-dialog>
    <!--推送表单新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false" min-width="520px">
      <!-- 具体表单 -->
      <div style="max-height: 60vh;overflow: auto;width: 100%">
        <el-form label-position="right" ref="pushForm" :model="currentRow_push" label-width="120px" :rules="rule"
                 class="form_width-200">
          <el-form-item label="公司名称：" prop="name">
            <el-select v-model="currentRow_push.name" placeholder="请选择">
              <el-option
                v-for="item in EnumPushApiCompanyList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="选择绑定项目：" prop="projectIdList">-->
          <!--            <el-select v-model="currentRow_push.projectIdList" multiple placeholder="请选择">-->
          <!--              <el-option-->
          <!--                v-for="item in projectList"-->
          <!--                :key="item.id"-->
          <!--                :label="item.name"-->
          <!--                :value="item.id">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
        </el-form>

      </div>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
                <el-button class="common_btn-defalut" type="primary" @click="validateAddForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Enums from '@/utils/enums'
  import Format from '@/utils/format'
  import XLoading from '@/components/animation/x-loading.vue'
  import {pushAdd, getPushQuery, pushAddRule, getRuleQuery} from '@/services/model/push'

  export default {
    mixins:[Enums],
    components: {XLoading},
    data() {
      return {
        EnumProjectMonitorTypeList:[],
        EnumPushApiCompanyList: [],
        rule: {
          name: {required: true, message: '请输入公司名称'},
          projectIdList: {required: true, message: '请选择需要绑定项目'},
        },
        isShowDialog: false,
        currentRow_push: {
          name: '',
          projectIdList: []
        },
        projectList: [],
        loading: true,
        EnumJavaTypeList: [],
        EnumTypeOnlyList: [{code: 1, name: 'value'}],
        EnumTypeList: [{code: 1, name: 'value'}, {code: 2, name: 'map'}, {code: 3, name: 'object'}, {
          code: 4,
          name: 'list'
        }, {
          code: 5,
          name: 'SBWYList'
        }],
        isShowDialogRule: false,
        // 接口正在加载
        isLoading: false,
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
          monitorType: ''
        },
        currentRow: {
          ruleList: [{
            javaName: '',
            javaType: null,
            objectType: null,
            pushName: '',

          }]
        },

        tableList: [],
        EnumEquipStatusList: [],
        ProjectMonitorType: []
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑' : '新增'
      },

    },
    filters: {
      gradeMonitorType(val) {
        let iconMap = {
          1: 'iconshenbuweiyicexieyi',
          2: 'iconGNSS',
          3: 'iconlaxianweiyi',
          4: 'iconjiangyuliang',
          5: 'icondixiashuiwei',
          6: 'iconmaosuochuanganqi',
          7: 'iconjinglishuizhunyi2',
          8: 'iconqingjiao',
          9: 'iconxianxingtu',
          10: 'iconshidu',
          11: 'iconfengsufengxiangjiance',
          12: 'icondiyingli',
          13: 'iconzhendong',
          14: 'iconjianshiqicai01',
          15: 'iconGNSS',
          16: 'iconjianshiqicai01',
          17: 'iconzhendong',
          18: 'iconleida',
          19: 'iconshengguangbaojing',
          20: 'icona-fenzu1',
          21: 'iconzhendong',
          22: 'icondb_fill',
          23: 'iconzhendong',
        }
        return iconMap[val]
      },

      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer))
        }
        return ''
      },
      equipStatusColor(val) {
        switch (val) {
          case '在线':
            return 'background-color:#0DC26B'
          case '离线':
            return 'background-color:#e43321'
          default:
            return 'background-color:#03a9f4'
        }
      },
    },
    methods: {
      handleDeleteCurrenRow(row,index,parentIndex

      ){
        if(parentIndex){
          this.currentRow.ruleList[parentIndex].childList.splice(index,1)

        }else {
          this.currentRow.ruleList.splice(index,1)

        }
      },
      async handleDeleteSection(id) {
        let res = await deleteSection({id: id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '区间删除成功'
          })
        }
        this.queryList()
      },
      // 展开分段
      async queryFormInfoList(row, list) {
        this.loading = true
        let item = list.find(x => x.id === row.id)
        // item不存在，则当前是关闭
        if (!item) return false
        const {data} = await getRuleQuery({id: row.id})
        row.children = data
        this.loading = false
      },
      // 表单提交
      validateAddForm() {
        this.$refs.pushForm.validate((valid) => {
          if (valid) {
            this.addFormPush()
          }
        })
      },
      //新增推送
      async addFormPush() {
        let res = await pushAdd(this.currentRow_push)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功！'
          })
          this.isShowDialog = false
          this.queryList()
        }
      },

      //新增 规则
      async addFormRule() {
        let res = await pushAddRule(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: this.currentRow.id?'编辑成功':'添加成功'
          })
          this.isShowDialogRule = false
          this.queryList()
        }
      },
      // 展开区间
      queryRoadSectionList(row, list) {
        if (row.objectType == null) {
          this.$message({
            message: '请先选择本条信息类型',
            type: 'warning'
          });
          return
        }
        this.loading = true
        if (row.objectType == 1) return false
        this.$forceUpdate()// 强制刷新
        this.loading = false
      },
      // 新增 currentRow.childList
      addCurrenRow(row) {
        if (row) {
          if (row.objectType == 1) {
            return
          } else if (row.objectType == 2) {
            row.childList.push({
              javaName: '',
              javaType: null,
              objectType: 1,
              pushName: '',
              childList: []
            })
          } else {
            row.childList.push({
              javaName: '',
              javaType: null,
              objectType: null,
              pushName: '',
              childList: []
            })
            return this.$forceUpdate()// 强制刷新
          }
        }else {
          this.currentRow.ruleList.push({
            javaName: '',
            javaType: null,
            objectType: null,
            pushName: '',
            childList: []
          })
        }
      },
      //修改type后 修改类型
      changeType(item) {
        if (item.objectType == 1) {
          return delete item.childList
        } else {
          return item.childList = []
        }


      },
      // 编辑
      handleEdit(row,type) {
        this.isShowDialogRule = true
        let data=JSON.parse(JSON.stringify(row))
        this.currentRow = data
        if( this.EnumProjectMonitorTypeList[0].code!==0){
          this.EnumProjectMonitorTypeList.unshift({code:0,name:'前置接口'})

        }
        if(type=='parent'){
          this.currentRow.id=''
          this.currentRow.parentId=JSON.parse(JSON.stringify(row)).id
          this.currentRow.ruleList=[]
          this.currentRow.ruleList.push({
            javaName: '',
            javaType: null,
            objectType: null,
            pushName: '',
            childList: []
          })
        }
        this.$forceUpdate()// 强制刷新
      },
      //新增push数据
      handleAdd() {
        this.isShowDialog = true
        this.$nextTick(() => {
          this.currentRow_push = {}

        })
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      async queryList() {
        this.isLoading = true
        let res = await getPushQuery(this.form)
        this.tableList = res.data?.records
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
      }
    },
    activated() {
      this.queryList()
    },
    mounted() {

      this.$nextTick(()=>{
        this.queryDictList(['EnumProjectMonitorType','EnumPushApiCompany','EnumJavaType'],
          ['EnumProjectMonitorTypeList', 'EnumPushApiCompanyList', 'EnumJavaTypeList'])
        //
      })
    }
  }
</script>
<style scoped="scoped" lang="less">
  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1b1b1b;
  }

  .btn-other {
    color: #e6a23c;
  }

  .btn_jump {
    color: #00d600;
  }

  .equip_label {
    color: #1990FE;
    font-size: 10px;
    padding: 2px 0 3px 10px;

    .info {
      color: #000000;
      margin-left: 5px;
    }
  }
</style>
